<template>
  <div>
    <div class="container">
      <div class="header">
        <div>
          <el-button type="text" icon="el-icon-arrow-left" style="color: black; font-size: 15px" @click="goBack">
            <span>购买加速包</span>
          </el-button>
        </div>
        <div class="right">
          <el-button type="text" icon="el-icon-more"></el-button>
          <el-button type="text" icon="el-icon-s-help"></el-button>
        </div>
      </div>

      <h1>{{this.quickenPoint}}</h1>
      <h5>好友助力加速值</h5>
      <p class="helpInfo">邀请好友注册，可获得20积分，多邀多得<button class="helpButton" @click="openInviteDialog">去邀请</button></p>
      <hr>
      <el-dialog title="邀请好友" :visible.sync="dialogVisible" width="30%">
        <el-select v-model="userIdList" multiple placeholder="请选择要邀请的好友">
          <el-option
              v-for="user in userList"
              :key="user.id"
              :label="user.realName"
              :value="user.id">
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="inviteFriends">确 定</el-button>
      </span>
      </el-dialog>
      <p class="helpP">助力记录 <span class="helpPerson">已成功邀请3人</span></p>

      <el-table
          :data="allUserList"
          style="width: 100%"
          :show-header="false">
        <el-table-column prop="photo" label="头像" width="50">
          <template slot-scope="scope">
            <img :src="scope.row.photo" alt="" width="50px">
          </template>
        </el-table-column>
        <el-table-column prop="realName" label="姓名"/>
        <el-table-column prop="phone" label="电话"/>
        <el-table-column prop="createTime" label="创建时间"/>
          </el-table>
    </div>
  </div>
</template>

<script>
let url = 'http://localhost:9701/web/';
export default {
  data() {
    return {
      tableData: [],
      formLabelWidth: '120px',
      isNavigating: false ,// 用于标识是否正在导航
      dialogVisible: false,
      userList:[],
      userIdList:[],
      uid:'',
      quickenPoint:'',
      allUserList:[]
    }
  },
  created() {
    this.findUserList();
    this.findUser();
    this.getAllUserInfo();
  },
  methods:{
    findUser() {
      this.axios.get(url+'user-account/getUserAccount').then(res=>{
        this.quickenPoint = res.data.data;
      })
    },
    getAllUserInfo(){
      this.axios.get(url+"userInfo/getAllUserInfo").then(res => {
        this.allUserList = res.data.data;
      })
    },
    inviteFriends(){
      this.axios.get(url+"user-account/invite?list="+this.userList.map(user => user.id).join(',')).then(res => {
          if(res.data.data === false){
            this.$message({
              message: '邀请失败',
              type: 'error'
            });
          }else if(res.data.data === true){
            this.$message({
              message: '邀请成功',
              type: 'success'
            });
          }
          this.dialogVisible = false;
      })
    },
    openInviteDialog(){
      this.dialogVisible = true;
    },
    goBack(){
      this.$router.go(-1);
    },
    findUserList(){
      this.axios.get(url+"userInfo/getAllUserInfo").then(res => {
        this.userList = res.data.data;
        this.userIdList = res.data.data.map(user => user.id);
      })
    },
  }
}
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}

.right {
  display: flex;
  border: 1px solid #F4A780;
  padding: 5px 5px;
  border-radius: 15px;
}

.right button {
  color: #F4A780;
  padding: 0 5px;
  font-size: 18px;
}

.helpInfo {
  text-align: left;
  font-size: 14px;
  margin-bottom: 20px;
  padding-left: 5px;
}

.helpButton {
  float: right;
  width: 70px;
  height: 28px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 5px;
}

.helpP{
  text-align: left;
  padding-left: 10px;
  font-size: 15px;
}

</style>